<template>
  <div class="songlist-box">
    <!-- 下拉选择 -->
    <div class="box-top">
      <el-dropdown @command="handleCommand">
        <el-button>
          {{ className }}<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, index) in classData"
            :key="index"
            :command="item.name"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!-- 热门歌单 -->
    <div class="hotClass">
      <span>热门歌单：</span>
      <!-- 动态获取 -->
      <span
        style="cursor: pointer"
        v-for="(item, index) in classData"
        :key="index"
        :class="className == item.name ? 'redtext' : ''"
        @click="selectClass(item.name)"
        >{{ item.name }}
        <!-- 动态的添加样式  className = 华语 -->
        <span
          class="font"
          style="margin: 0 8px"
          v-if="index != classData.length - 1"
          >|</span
        >
      </span>
    </div>

    <!-- 歌单列表 -->
    <div class="listMusic flex-one">
      <div class="item" v-for="(item, index) in listData" :key="index">
        <div class="item-top">
          <div class="play-num">
            <i class="el-icon-service">{{
              item.playCount >= 10000
                ? Math.round(item.playCount / 10000) + "万"
                : item.playCount
            }}</i>
          </div>
          <div class="top-name">
            <i class="el-icon-user text-one">{{ item.creator.nickname }}</i>
          </div>
          <img :src="item.coverImgUrl" alt="" />
          <div class="playMusic"><i class="el-icon-video-play"></i></div>
        </div>
        <div class="buttom-write text-one">{{ item.name }}</div>
      </div>
    </div>

    <!-- //分页 -->
    <div class="songlist-bottom">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="offset"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getClass, getSonglist } from "@/network/songlist.js";
export default {
  name: "SongList",
  data() {
    return {
      classData: [],
      className: "音乐", //华语
      limit: 30, //限制条数
      listData: [],
      offset: 1, //当前是第几页
      listTotal: 40,
    };
  },
  created() {
    this.getClassM();
    this.getListData(this.limit, this.offset, "");
  },
  methods: {
    handleCurrentChange(val) {
      // console.log(`当前页:${val}`);
      this.offset = val;
      if (this.className == "音乐") {
        this.getListData(this.limit, this.offset, "");
      }else{
        this.getListData(this.limit, this.offset, this.className);
      }
    },

    getClassM() {
      //get class
      getClass("/playlist/hot").then(res => {
        this.classData = res.tags;
      });
    },
    //获取下拉菜单的值
    handleCommand(command) {
      this.className = command;
      //根据类名发送请求获取歌单列表
      this.offset = 1
      this.getListData(this.limit, this.offset, command);
    },
    //获取列表歌单
    getListData(limit, offset, cat) {
      getSonglist("/top/playlist", {
        limit: limit,
        offset: offset,
        cat: cat,
      }).then(res => {
        this.listData = res.playlists;
        this.listTotal = res.total;
      });
    },
    selectClass(item) {
      this.className = item;
      this.offset = 1
      this.getListData(this.limit, this.offset, item);
    },
  },
};
</script>

<style scoped lang='less'>
.redtext {
  color: red;
  font-size: 20px;
  font-weight: 700;
  font-style:italic;
  .font {
    font-size: 16px;
    color: black;
    font-weight: 400;
    font-style:normal;
  }
}
//
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
//
.songlist-box {
  .songlist-bottom{
    margin: 10px auto;
    text-align: center;
  }
  .box-top {
    margin-top: 20px;
  }
  .hotClass {
    margin-top: 20px;
  }
  //音乐列表
  .listMusic {
    margin-top: 25px;
    .item {
      height: 200px;
      width: 150px;
      overflow: hidden;
      margin-right: 6px;
      .item-top {
        height: 150px;
        width: 150px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        .play-num {
          position: absolute;
          right: 0;
          width: 55px;
          height: 15px;
          font-size: 8px;
          background: rgba(19, 18, 18, 0.5);
          color: #fff;
          text-align: right;
          padding-right: 5px;
        }
        img {
          width: 100%;
          height: 100%;
        }
        .top-name {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 150px;
          height: 20px;
          line-height: 20px;
          font-size: 10px;
          color: #fff;
          background: rgba(19, 18, 18, 0.5);
          overflow: hidden;
          border-radius: 2px;
        }
        .playMusic {
          position: absolute;
          right: 10px;
          bottom: 18px;
          width: 50px;
          height: 50px;
          transform: translateX(120%);
          transition: transform 0.4s;
          border-radius: 50%;
          font-size: 50px;
          color: red;
        }
      }
      .buttom-write {
        font-size: 12px;
      }
    }
    .item:hover .playMusic {
      transform: translateX(0);
    }
  }
}
</style>